<template>
  <view class="item" @click="itemClick">
    <view class="item__image">
      <uv-image
        :src="`${env.ossBucket}${images}`"
        width="335rpx"
        height="335rpx"
        mode="aspectFill"
      >
        <template v-slot:loading>
          <uv-loading-icon></uv-loading-icon>
        </template>
      </uv-image>
      <view class="recommend">推荐</view>
      <view v-if="cityPosition" class="positionAddress">
        <uv-icon name="map" color="#333" size="14"></uv-icon>
        <view class="distance">23.5km</view>
        <view class="addressName">{{ cityPosition }}</view>
      </view>
    </view>
    <view class="item__ft">
      <view class="item__ft_line">
        <view v-if="releaseTime.length" class="releaseTime">
          <uv-icon name="clock" color="#36A1EE" size="18rpx"></uv-icon>
          <text class="line">|</text>
          <template v-if="releaseTime.length === 1">
            <text>刚刚发布</text>
          </template>
          <template v-else>
            <text>{{ releaseTime[0] }}{{ releaseTime[1] }}内发布</text>
          </template>
        </view>
        <view v-if="item.isDeliveryCovered" class="isDeliveryCoveredWrap">
          <view class="isDeliveryCovered"> 包邮 </view>
        </view>
      </view>
      <view class="item__ft__title uv-line-2">
        <text v-if="titleTag && articleType === 1" class="tagWrap">{{
          titleTag
        }}</text>
        <text v-if="isHelp" class="helpView">求助</text>
        <text v-if="titleTag && !isHelp && articleType === 1" class="line"
          >|</text
        >
        <text class="value">{{ item.title }}</text>
      </view>
      <view class="moneyNum">
        <template v-if="articleType === 1">¥{{ item.price }}</template>
        <template v-if="articleType === 2">求购</template>
        <template v-if="articleType === 3">赠送</template>
      </view>
      <view class="publiceName">
        <view class="nameWrap">
          <uv-image
            :src="`${env.ossBucket}${images}`"
            width="40rpx"
            height="40rpx"
            shape="circle"
            mode="aspectFill"
          >
            <template v-slot:loading>
              <uv-loading-icon size="40rpx"></uv-loading-icon>
            </template>
          </uv-image>
          <view class="name uv-line-1"> TmmmmmmmmTmmmmmmmm </view>
        </view>
        <view class="collect">
          <uv-icon name="star" color="#999999" size="24rpx"></uv-icon>
          1122
        </view>
      </view>
      <view style="margin-top: 15rpx; display: flex">
        <FollowStyle v-if="isCollect" :isFollow="true" followText="你的关注" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, toRef, inject } from "vue";
import { useStore } from "vuex";

import FollowStyle from "@/components/FollowStyle";

import { sellType, publishType, expressMailType } from "/utils/enums/index.js";

const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
});
const item = toRef(props, "item");
const qqmapsdk = inject("qqmapsdk");

const store = useStore();
const reverseGeocoderResult = toRef(
  store.state.position,
  "reverseGeocoderResult"
);
const latitude = toRef(store.state.position, "latitude");
const longitude = toRef(store.state.position, "longitude");

// 城市显示
const cityPosition = computed(() => {
  if (!item.value.location || !reverseGeocoderResult.value.address_component)
    return "";
  const address_component = reverseGeocoderResult.value.address_component;
  const po1 = item.value.location.split(",");
  const po2 = [
    address_component.province,
    address_component.city,
    address_component.district,
  ];
  if (po1[0] === po2[0] && po1[1] === po2[1]) return po1[2];
  else if (po1[0] === po2[0]) return po1[1];
  else return po1[0];
});

// 距离显示
// const distancePosition = computed(() => {
// 	if (!item.value.location || !latitude.value || !longitude.value) return ''
// 	return new Promise((resolve, reject) => {
// 		qqmapsdk.calculateDistance({
// 			mode: 'driving', //可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填
// 			//from参数不填默认当前地址
// 			//获取表单提交的经纬度并设置from和to参数（示例为string格式）
// 			from: {
// 				latitude: 39.984060,
// 				longitude: 116.307520
// 			}, //若起点有数据则采用起点坐标，若为空默认当前地址
// 			to: [{
// 				latitude: 39.984060,
// 				longitude: 116.307520
// 			}], //终点坐标
// 			success: function(res) { //成功后的回调
// 				console.log(res);
// 				var res = res.result;
// 				var dis = [];
// 				for (var i = 0; i < res.elements.length; i++) {
// 					dis.push(res.elements[i].distance); //将返回数据存入dis数组，
// 				}
// 				_this.setData({ //设置并更新distance数据
// 					distance: dis
// 				});
// 			},
// 			fail: function(error) {
// 				console.error(error);
// 			},
// 			complete: function(res) {
// 				console.log(res);
// 			}
// 		});
// 	})
// })

// 暂时测试用
const radom = Math.floor(Math.random() * 10);
// 取用第一张图片
const images = computed(() => {
  return item.value.images.split(",")[0];
});
// 配送方式
const titleTag = computed(() => {
  return (
    expressMailType.find((it) => it.type === item.value.deliveryMethod)?.name ||
    ""
  );
});
// 发布时间
const releaseTime = computed(() => {
  if (radom > 7) return ["1", "小时"];
  else if (radom > 4) return ["0"];
  else if (radom > 1) return ["3", "周"];
  return [];
});
// 是否求助帖
const isHelp = computed(() => {
  return !!item.value.isNeedHelp;
});
// 帖子类型
/**
 * 1 售卖贴，有金钱数额，显示金额
 * 2 求购贴，无金钱数额，显示求购
 * 3 赠送贴，无金钱数额，显示赠送
 * 4 交流贴，不显示这行文案
 * */
const articleType = computed(() => {
  return item.value.articleType;
});
const isCollect = computed(() => {
  return radom > 5;
});
const itemClick = () => {
  uni.navigateTo({ url: `/pages/index/detail?id=${item.value.articleId}` });
};
</script>

<style lang="scss">
.item {
  overflow: hidden;
  margin-top: 10px;
  border-radius: 6px;
}

.item__image {
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  margin-bottom: 15rpx;

  .recommend {
    background-image: linear-gradient(
      90deg,
      rgba(89, 195, 248, 1) 0,
      rgba(89, 195, 248, 1) 0,
      rgba(54, 161, 238, 1) 100%,
      rgba(54, 161, 238, 1) 100%
    );
    border-radius: 0rpx 20rpx 0rpx 14rpx;
    height: 36rpx;
    width: 92rpx;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 22rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }

  .positionAddress {
    background: #fff;
    border-radius: 20rpx;
    height: 40rpx;
    min-width: 80rpx;
    position: absolute;
    bottom: 20rpx;
    right: 20rpx;
    font-size: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    padding: 0 14rpx;

    .addressName {
      margin-left: 6rpx;
      padding-bottom: 2rpx;
    }
  }
}

.item__ft {
  padding: 0 0 20rpx;
  background: #fff;
  display: flex;
  flex-direction: column;

  .item__ft_line {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .isDeliveryCoveredWrap {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15rpx;
  }

  .isDeliveryCovered {
    background-image: linear-gradient(
      90deg,
      rgba(89, 195, 248, 1) 0,
      rgba(89, 195, 248, 1) 0,
      rgba(54, 161, 238, 1) 100%,
      rgba(54, 161, 238, 1) 100%
    );
    border-radius: 15rpx;
    height: 30rpx;
    width: 65rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16rpx;
    color: #fff;
  }

  .releaseTime {
    height: 30rpx;
    border-radius: 15rpx;
    background-color: rgba(54, 161, 238, 0.3);
    color: #36a1ee;
    font-size: 16rpx;
    padding: 0 15rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin-bottom: 15rpx;

    .line {
      margin: 0 6rpx;
    }
  }

  .item__ft__title {
    font-size: 22rpx;
    color: #333;
    width: 100%;

    .line {
      margin: 0 5rpx;
      color: #ebebeb;
    }

    .tagWrap {
      color: #39a4ef;
    }

    .helpView {
      background-image: linear-gradient(
        90deg,
        rgba(244, 124, 130, 1) 0,
        rgba(244, 124, 130, 1) 0,
        rgba(244, 89, 75, 1) 100%,
        rgba(244, 89, 75, 1) 100%
      );
      border-radius: 20rpx;
      font-size: 18rpx;
      color: #ffffff;
      padding: 6rpx 15rpx;
      margin-right: 6rpx;
    }
  }

  .moneyNum {
    color: #e60014;
    font-weight: bold;
    font-size: 32rpx;
    margin-top: 15rpx;
  }

  .publiceName {
    display: flex;
    align-items: center;
    font-size: 16rpx;
    color: #999;
    margin-top: 15rpx;

    .nameWrap {
      flex: 1;
      display: flex;
      align-items: center;

      .name {
        flex: 1;
        margin-left: 5rpx;
      }
    }

    .collect {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-right: 20rpx;
    }
  }
}
</style>
